<template>
  <div style="width: 100%; border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      v-model="valueHtml"
      :style="`height: ${editorHeight}; overflow-y: hidden`"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<script lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, watch, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { editorMenuConfig } from "./config";
export default {
  components: { Editor, Toolbar },
  props: {
    editorHeight: {
      type: String,
      default: "440px"
    },
    placeholder: {
      type: String,
      default: "请输入"
    },
    modelValue: {
      type: String,
      default: ""
    }
  },
  emits: ["update:modelValue"],
  // watch: {
  //   modelValue(val) {
  //     console.log(val, "val", editorRef.value, "editorRef.value");
  //   }
  // },
  setup(props, ctx) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref("<p><br/></p>");

    const toolbarConfig = { modalAppendToBody: true };
    const editorConfig = ref({
      placeholder: props.placeholder,
      ...editorMenuConfig
    });

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });
    watch(
      () => props.modelValue,
      val => {
        if (editorRef.value) {
          const oldVal = editorRef.value.getHtml();
          if (val !== oldVal) {
            editorRef.value && editorRef.value.setHtml(val);
          }
        }
      }
    );
    const handleCreated = editor => {
      editorRef.value = editor; // 记录 editor 实例，重要！
      editor.setHtml("<p><br/></p>");
      // 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层
      editor.on("modalOrPanelShow", modalOrPanel => {
        if (modalOrPanel.type !== "modal") return;
        const { $elem } = modalOrPanel; // modal element
        // 设置 modal 样式（定位、z-index）
        $elem[0].style.top = "50%";
        $elem[0].style.left = "50%";
        $elem[0].style.zIndex = "999";
        $elem[0].style.transform = "translate3d(-50%,-50%,0)";
      });
    };
    const handleChange = editor => {
      ctx.emit("update:modelValue", editor.getHtml());
    };
    // 获取纯文本
    const getEditText = () => {
      const text = (editorRef.value && editorRef.value.getText()) || "";
      return text;
    };
    const isWangEditorText = () => {
      let str = editorRef.value.getHtml();
      let num = 0,
        reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
      while (num < str.length && str != "") {
        num++;
        let k = str.match(reg);
        if (k) {
          str = str.replace(k[0], "");
        }
      }
      return str !== "";
    };
    return {
      editorRef,
      valueHtml,
      mode: "default", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleChange,
      getEditText,
      isWangEditorText
    };
  }
};
</script>
<style lang="scss" scoped>
@import url("@wangeditor/editor/dist/css/style.css");

.w-e-full-screen-container {
  z-index: 999;
}

.w-e-modal button {
  line-height: 1;
}
</style>
